/* eslint-disable @typescript-eslint/restrict-template-expressions */
import React, { FC } from 'react'
import style from './index.module.scss'
import { NavLink } from 'react-router-dom'
import { indexRoutes } from '@/router/router.config'
import { Dropdown, Menu } from 'antd'
import { useTranslation } from 'react-i18next'
import { SearchOutlined } from '@ant-design/icons'
// import { changeDark, changeLight } from '@/themes'
const src =
  'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'

const language = ['en', 'zh']
const Header: FC = () => {
  const { t, i18n } = useTranslation()
  const changeLocale = (value: string): void => {
    void i18n.changeLanguage(value)
    localStorage.setItem('lang', i18n.language)
  }

  const menu = (
    <Menu>
      {language.map((locale) => {
        return (
          <Menu.Item key={locale} onClick={() => changeLocale(locale)}>
            {t('language.' + locale)}
          </Menu.Item>
        )
      })}
    </Menu>
  )
  return (
    <div className={style.header}>
      <div className={style.container}>
        <img src={src} className={style.icon} alt="" />
        <ul>
          {indexRoutes.map((item) => {
            return (
              <li key={item.path}>
                <NavLink to={item.path}>
                  {t('header.' + item.meta.title)}
                </NavLink>
              </li>
            )
          })}
        </ul>

        <div className={style.right}>
          <div className={style.text}>
            <SearchOutlined />
          </div>

          <div className={style.text}>
            <div className={style.sun}></div>
          </div>

          <Dropdown overlay={menu}>
            <div
              className={style.text}
              style={{
                alignItems: 'center',
                width: 24,
                cursor: 'pointer'
              }}
            >
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
              >
                <path
                  d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z"
                  fill="currentColor"
                ></path>
              </svg>
            </div>
          </Dropdown>
        </div>
      </div>
    </div>
  )
}

export default Header
